<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="vue.js"></script>
    <style>
        .bgc-yellow {
            background-color: yellow;
            width: 300px;
            height: 100px;
        }

        .bgc-black {
            background-color: #000000;
            height: 100px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="demo1" v-bind:style="{ color: 'red', width: '100px', height: '50px', border: '1px solid blue' }">{{message}}</div>

        <div class="demo2" :class="{ 'bgc-yellow': isActive, 'bgc-black': hasError }" @click="onClick">{{message}}</div>

        <div class="demo3" v-bind:class="classObject" v-on:click="handler"></div>

        <div class="demo4" :style="{ width:'300px', height: '500px', border: '1px solid red' }">
            <input type="text" v-model="picked">
            <input type="radio" v-model='picked' value="man" id="M">
            <label for="M">先生</label>
            <input type="radio" v-model="picked" value="woman" id="W">
            <label for="W">小娘子</label>
            <label for="P">半妖</label>
            <input type="radio" v-model="picked" value="peopleMonster" id="P">
        </div>
        <button-counter title="点击加一"></button-counter>

        <div :style="{ fontSize: postFontSize + 'em' }">
            {{postFontSize}}
            <button-counter
                v-for="post in posts"
                v-on:enlarge-text="onEnlargeText"
                v-bind:title="post.title"
                v-bind:text="post.text"
                v-bind:date="post.date"
                v-bind:author="post.author"
            ></button-counter>
        </div>
    </div>

    <script>
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0,
                }
            },
            methods: {
                addOne: function () {
                    this.count ++;
                }
            },
            props: ['title', 'text', 'date', 'author'],
            template: `
                <div class="blog-component" v-bind:style="{ padding: '20px', border: '1px solid #ececec', 'border-radius': '3px', margin: '40px', dispaly: 'block' }">
                    <h1>{{title}}</h1>
                    <button @click="$emit('enlarge-text', 0.1, 0.2)">Enlarge Text</button>
                    <div :style="{ height: '30px', 'font-size': '14px', width: '100%', color: '#ff00ff', 'text-align': 'center' }">{{date}}</div>
                    <div :style="{ width: '100%', 'margin-top': '12px', 'border-top': '1px solid #e3e3e3', padding: '20px 40px 50px 40px', 'font-size': '24px', color: '#00ff00' }">{{text}}</div>
                    <div>{{author}}</div>
                </div>
            `
        });

        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
                isActive: true,
                hasError: false,
                postFontSize: 1,
                classObject: {
                    'bgc-yellow': true,
                    'bgc-black': false,
                },
                picked: '',
                posts: [{
                    title: "The First Day",
                    author: "huli",
                    date: '2022/2/21',
                    text: `
                        今天第一次使用一个如此好的想法
                        今天第一次使用一个如此好的想法
                        今天第一次使用一个如此好的想法
                        今天第一次使用一个如此好的想法
                    `
                }, {
                    title: "The First Day",
                    author: "huli",
                    date: '2022/2/21',
                    text: `
                        今天第二次使用一个如此好的想法
                        今天第一次使用一个如此好的想法
                        今天第e一次使用一个如此好的想法
                        今天第一次使用一个如此好的想法
                    `
                }]
            },
            methods: {
                onClick: function () {
                    this.isActive = !this.isActive;
                    this.hasError = !this.hasError;
                    console.log(this.hasError);
                    this.message = 'hide';
                },
                handler: function () {
                    this.classObject["bgc-yellow"] = !this.classObject["bgc-yellow"];
                    this.classObject["bgc-black"] = !this.classObject["bgc-black"];

                    console.log(this.classObject.isActive);
                },
                onEnlargeText: function (e, e2) {
                    this.postFontSize += e2;
                    console.log(e + e2);
                }
            }
        });

        
    </script>
    
</body>
</html>